<template>
  <view>
    <view class="msgs">
      <view class="msg" v-for="i in 3" :key="i">
        <view class="avatar">
          <u-avatar src="/static/icons/xitong.png" size="54" mode="square"></u-avatar>
        </view>
        
        <view class="info">
          <view class="title">
            <text>系统消息</text>
          </view>
          <view class="sub text-cut">您已成功开通会员,并获得60元代金券已放入您的“我的-代您已成功开通会员,并获得60元代金券已放入您的“我的-代您已成功开通会员,并获得60元代金券已放入您的“我的-代</view>
        </view>
        
        <view class="date">
          <text>昨天18:57</text>
          <u-badge type="error" count="7" size="mini" :offset="[40, 30]"></u-badge>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  .msg {
    background: #fff;
    padding: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    
    &::after {
      content: '';
      width: 630rpx;
      height: 2rpx;
      background: #EFEFEF;
      position: absolute;
      right: 0;
      bottom: 0;
      transform: translateX(-24rpx);
    }
    
    .avatar {
      position: relative;
    }
    
    .info {
      width: 500rpx;
      
      .title {
        color: #000000;
        font-size: 28rpx;
        display: flex;
        align-items: center;
      }
      
      .gf {
        width: auto;
        height: 28rpx;
        margin-left: 8rpx;
      }
      
      .sub {
        color: #999999;
        font-size: 20rpx;
      }
    }
    
    .date {
      color: #CDCDCD;
      font-size: 18rpx;
      transform: translateY(-120%);
      position: relative;
    }
  }
</style>